<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div class="wrapper">
    <nav>
        <div class="container">
            <div class="logo">
                <img src="img/brand-white.png" alt="">
            </div>
            <ul>
                <li><a href="">Home</a></li>
                <li class="li2"><a href="">Profile</a></li>
                <li class="li2"><a href="">Messages</a></li>
                <li class="li2"><a href="">Docs</a></li>
            </ul>
        </div>
    </nav>

    <section>
        <div class="container">
            <div class="left">
                <div class="left-top">
                    <div class="left-top1">
                        <img src="img/iceland.jpg" alt="" class="img1">
                    </div>
                    <div class="left-top2">
                        <img src="img/avatar-dhg.png" alt="" class="img2">
                        <h4>Dasve Camache</h4>
                        <p class="left-p1">I wish i was a little bit taller,wich i</p>
                        <p>was a baller.</p>
                    </div>
                </div>
                <div class="left-middle">
                    <h4>About</h4>
                    <p class="middle-p1">Went to <span>Oh,Cananda</span></p>
                    <p class="middle-p1">Became friends with <span>Obama</span></p>
                    <p class="middle-p1">Worked at <span>Github</span></p>
                    <p class="middle-p1">Lives in <span>San Francisco, CA</span></p>
                    <p>From <span>Seattle, WA</span></p>
                </div>
                <div class="left-bottom">
                    <h4>Photos</h4>
                    <div class="left-bottom-1">
                    <div class="left-bottom1">
                        <img src="img/instagram1.jpg" alt="" class="bottom-img1">
                        <img src="img/instagram3.jpg" alt="" class="bottom-img1">
                        <img src="img/instagram5.jpg" alt="" class="bottom-img2">
                    </div>
                    <div class="left-bottom2">
                        <img src="img/instagram2.jpg" alt="" class="bottom-img1">
                        <img src="img/instagram4.jpg" alt="" class="bottom-img1">
                        <img src="img/instagram6.jpg" alt="" class="bottom-img2">
                    </div>
                    </div>
                </div>
            </div>

            <div class="middle">
                <div class="middle-top">
                    <div class="middle-top1">
                        <div class="middle-top1-1">
                            <h4>Dave Gamache</h4>
                            <p>4min</p>
                        </div>
                        <div class="middle-top1-2">
                            <p>Aenean lacinia bibendum nulla sed consectetur.Vestibulum id ligula porta felis</p>
                            <p class="middle-top-p2">euismod semper.Morbi leo risus,porta ac consectetur ac,vestibulum at eros.Cras</p>
                            <p class="middle-top-p2">justo odio,dapibus ac facilisis in,egestas eget quam.Vestibulum id ligula porta felis</p>
                            <p class="middle-top-p2">euismod semper. Cum sociis natoque penatibus et magnis dis parturient motes</p>
                            <p class="middle-top-p2">nascetur ridiculus mus.</p>
                        </div>
                    </div>
                    <div class="middle-top1-3">
                        <div class="m-t-1">
                            <img src="img/unsplash_1.jpg" alt="" class="img11">
                            <img src="img/unsplash_3.jpg" alt="">
                        </div>
                        <div class="m-t-2">
                            <img src="img/unsplash-2.jpg" alt="" class="img11">
                            <img src="img/unsplash_4.jpg" alt="">
                        </div>
                    </div>
                    <div class="middle-top1-4">
                        <p><span>Jacon Thornton:</span>Donrc id rlit non mi porta gravida at eget metus. Vivamus sagittis</p>
                        <p class="middle-top-p2">lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non</p>
                        <p class="middle-top-p2">metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl</p>
                        <p class="middle-top-p2">consectetur et. Sed posuere consectetur est at lobortis.</p>
                    </div>
                    <div class="middle-top1-5">
                        <p><span>Mark Otto:</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,</p>
                        <p class="middle-top-p2">tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa</p>
                        <p class="middle-top-p2">justo sit amet risus.</p>
                    </div>
                </div>
                <div class="middle-middle">
                    <div class="middle-middle1">
                        <h4>Jacob Thornton</h4>
                        <p>12min</p>
                    </div>
                    <p>Donec id elit non mi porta gravida at eget metus.Integer posuere erat a ante</p>
                    <p class="middle-middle-p1">venenatis dapilbus posuere velit aliquet.Cum sociis natoque penatibus t magnis</p>
                    <p class="middle-middle-p1">dis parturient montes, nascetur tidiculus mus. Morbi leo risus, porta ac consectetur</p>
                    <p class="middle-middle-p1">ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <div class="middle-bottom">
                    <div class="mi-bo-1">
                        <div class="mi-bo-1-1 clearfix">
                            <h4>Mark Otto</h4>
                            <p>34min</p>
                        </div>
                        <p>Donec ullamcorper nullanon metus auctor fringliia.Vestibulum id ligula porta felis</p>
                        <p>euismod semper.Aenenan eu leo quam.Pellentesque ornare sem lacinia quam</p>
                        <p>venenatis vestibulum.Etiam porta sem malesuada magna mollis euismod.Donec</p>
                        <p>sed odie dui.</p>
                    </div>
                    <div class="mi-bo-2">
                        <img src="img/instagram_1.jpg" alt="">
                    </div>
                    <div class="mi-bo-3">
                        <p><span>Dave Gamache:</span>Donec id elit non mi porta gravida at eget metus.Vivamus sagittis</p>
                        <p>lacus vel augue laoreet rutrum faucibus dolor auctor.Donec ullamcorper nulla non</p>
                        <p>metus auctor fringilla.Praesent commodo cursus magna,vel scelerisque nisl</p>
                        <p>consectetur et.Sed posuere consectetur est at lobortis.</p>
                    </div>
                </div>
            </div>

            <div class="right">
                <div class="right-top">
                    <div class="right-t-1">
                        <h4>Sponsored</h4>
                        <img src="img/instagram_2.jpg" alt="">
                    </div>
                    <div class="right-t-2">
                        <h4>It might be time to visit lceland.</h4>
                        <p>lceland is so chill,and everything</p>
                        <p>looks cool here.Also,we header the</p>
                        <p>people are pretty nice.What are you</p>
                        <p>waiting for?</p>
                        <div class="button">
                            <button>Buy a ticket</button>
                        </div>
                    </div>
                </div>
                <div class="right-bottom">
                    <div class="r-b1">
                        <h4 class="h4">Likes</h4>
                        <div class="r-b1-1">
                            <img src="img/avatar-1.jpg" alt="" class="a1">
                            <div class="bo1">
                                <h4 class="h5">Jacob Thornton<span>@fat</span></h4>
                                <div class="b1">
                                    <button><img src="img/button.png" alt="">Follow</button>
                                </div>
                            </div>
                        </div>
                        <div class="r-b1-2">
                            <img src="img/avatar-2.png" alt="" class="a1">
                            <div class="bo1">
                                <h4 class="h5">Mark Otto <span>@mdo</span></h4>
                                <div class="b1">
                                    <button><img src="img/button.png" alt="">Follow</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="r-b2">
                        <div class="r-b2-1">
                        <p>Dave really likes these nerds,no one</p>
                        <p>knows why though.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <p>Desiged and built with all the love in the world by <a href="">@mdo, @fat,</a>and <a href="">@dhg.</a></p>
        <ul>
            <li class="footer1"><a href="">About</a></li>
            <li class="footer1"><a href="">Terms</a></li>
            <li class="footer1"><a href="">Privacy</a></li>
            <li class="footer1"><a href="">Licenses</a></li>
            <li><a href="">FAQ</a></li>
        </ul>
    </footer>
</div>
</body>
</html>